Use emphasis in mockups 在 Mockup 中使用視覺重點

為什麼要在 mockup 中使用強調？

強調可以：

• 引導使用者視線快速找到關鍵內容

• 提高資訊傳達效率

• 減少使用者思考負擔

• 增強介面美感和可用性

使用強調的三種關鍵手法

大小（Size）

透過放大重要元素來傳達其優先順序。

例子：商品頁面的標題如“Watermelon”使用大號字型，立即告訴使用者這是頁面的主題。

設計建議：

• 頁面標題 > 模組標題 > 正文文字

• CTA 按鈕（如“立即購買”）要比其他輔助按鈕更大或更突出

2.對比（Contrast）

強調內容的顏色、明暗或樣式明顯不同於周圍元素。

例子：

• 紅色和紫色的“新增購物車”與“下單”按鈕在灰白背景下異常醒目。

• 字型粗體、加色、下劃線、斜體、背景高亮等方式，也能讓文字脫穎而出。

設計建議：

• 讓操作性強的元素（按鈕、連結）在視覺上更突出

• 用色彩對比突出品牌主張或核心功能

3.紋理（Texture）

透過圖案或細節裝飾，增加視覺層次和趣味性。

例子：在品牌統計圖上，代表“80%使用者”的區域使用圓點紋理，讓這一資訊在圖表中脫穎而出。

設計建議：

• 不要濫用紋理，避免介面顯得混亂

• 只在重點圖形或特殊區域中新增，以引導注意力

實際案例：Google 關於頁面的強調設計

在 Google 的 About 頁面上：

• 用黑色字型 + 白底突出使命宣言，讓使用者快速讀懂資訊

• 用品牌色（如藍、紅、黃、綠）高亮出“品牌支柱”，讓使用者快速聚焦重點內容

這正是強調策略在真實產品中的高效體現。